<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Wookmark Sorting Example</title>
  <meta name="description" content="An example how to setup Wookmark with tile sorting">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS Reset -->
  <link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">

  <!-- Global CSS for the page and tiles -->
  <link rel="stylesheet" href="../css/main.css">

  <!-- Specific CSS for the example -->
  <style>
    /**
     * Grid items
     */
    #tiles li {
      -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
    }

    /**
     * Sort buttons
     */
    #sortbys {
      list-style-type: none;
      text-align: center;
      margin: 0 5% 0 5%;
    }

    #sortbys li {
      font-size: 12px;
      float: left;
      padding: 6px 0 4px 0;
      cursor: pointer;
      margin: 0 1% 0 1%;
      width: 8%;
      -webkit-transition: all 0.15s ease-out;
         -moz-transition: all 0.15s ease-out;
           -o-transition: all 0.15s ease-out;
              transition: all 0.15s ease-out;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
    }

    #sortbys li:hover {
      background: #dedede;
    }

    #sortbys li.active {
      background: #333333;
      color: #ffffff;
    }
  </style>

</head>

<body>

  <div>
    <header>
      <h1>Wookmark Sorting Example</h1>
      <p>Click the words below to sort the grid.</p>
      <br>
      <p><a href="../index.html">Back to overview</a></p>
    </header>

    <!--
      These are our filter options. The "data-sortby" classes are used to identify which
      grid items to show.
      -->
    <br/>
    <ol id="sortbys">
      <li data-sortby="name" class="active">Name</li>
      <li data-sortby="price">Price</li>
      <li data-sortby="popularity">Popularity</li>
    </ol>
    <br/>

    <div role="main">

      <ul id="container" class="tiles-wrap animated">
        <!--
          These are our grid items. Notice how each one has a data-attribute assigned that
          are used for sorting. The classes match the "data-sortby" properties above.
          -->
        <li data-price="20" data-popularity="4" data-name="icebear">
          <img src="../sample-images/image_1.jpg" height="283" width="200">
          <p>Icebear / 20 € / &#9733;&#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="24" data-popularity="3" data-name="hand">
          <img src="../sample-images/image_2.jpg" height="300" width="200">
          <p>Hand / 24 € / &#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="12.50" data-popularity="2" data-name="water">
          <img src="../sample-images/image_3.jpg" height="252" width="200">
          <p>Water / 12,50 € / &#9733;&#9733;</p>
        </li>
        <li data-price="100" data-popularity="1" data-name="runner">
          <img src="../sample-images/image_4.jpg" height="158" width="200">
          <p>Runner / 100 € / &#9733;</p>
        </li>
        <li data-price="42.12" data-popularity="3" data-name="street">
          <img src="../sample-images/image_5.jpg" height="300" width="200">
          <p>Street / 42,12 € / &#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="15" data-popularity="1" data-name="bathroom">
          <img src="../sample-images/image_6.jpg" height="297" width="200">
          <p>Bathroom / 15 € / &#9733;</p>
        </li>
        <li data-price="70" data-popularity="2" data-name="sign">
          <img src="../sample-images/image_7.jpg" height="200" width="200">
          <p>Sign / 70 € / &#9733;&#9733;</p>
        </li>
        <li data-price="18.99" data-popularity="4" data-name="camera">
          <img src="../sample-images/image_8.jpg" height="200" width="200">
          <p>Camera / 18,99 € / &#9733;&#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="5" data-popularity="4" data-name="winter">
          <img src="../sample-images/image_9.jpg" height="398" width="200">
          <p>Winter / 5 € / &#9733;&#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="7" data-popularity="1" data-name="kitchen">
          <img src="../sample-images/image_10.jpg" height="267" width="200">
          <p>Kitchen / 7 € / &#9733;</p>
        </li>
        <!-- End of grid blocks -->
      </ul>

    </div>
  </div>

  <!-- include jQuery -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>

  <!-- Include the imagesLoaded plug-in -->
  <script src="../bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>

  <!-- Include the plug-in -->
  <script src="../wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($) {
      imagesLoaded('#container', function () {
        function comparatorName(a, b) {
          return $(a).data('name') < $(b).data('name') ? -1 : 1;
        }
        function comparatorPopularity(a, b) {
          return $(a).data('popularity') > $(b).data('popularity') ? -1 : 1;
        }
        function comparatorPrice(a, b) {
          return $(a).data('price') > $(b).data('price') ? -1 : 1;
        }

        // Get a reference to your grid items.
        var wookmark,
            $sortbys = $('#sortbys li');

        // Call the layout function.
        wookmark = new Wookmark('#container', {
          offset: 2, // Optional, the distance between grid items
          itemWidth: 210, // Optional, the width of a grid item
          comparator: comparatorName
        });

        /**
         * When a filter is clicked, toggle it's active state and refresh.
         */
        var onClickSortBy = function(e) {
          e.preventDefault();
          var comparator;
          $currentSortby = $(this);
          switch ($currentSortby.data('sortby')) {
            case 'price':
              comparator = comparatorPrice;
              break;
            case 'popularity':
              comparator = comparatorPopularity;
              break;
            case 'name':
            default:
              comparator = comparatorName;
              break;
          }

          $sortbys.removeClass('active');
          $currentSortby.addClass('active');

          wookmark.updateOptions({
            comparator: comparator
          });
        }

        // Capture filter click events.
        $sortbys.click(onClickSortBy);
      });
    })(jQuery);
  </script>

</body>
</html>
